<template>
    <view class="tas-components">
        <view class="tags">
            <view 
                class="tagsList" >
                    <view class="label">{{ label }}</view>
                    <view 
                        v-for="(tag, index) in (templateNames? [...templateNames] : []).splice(0,displayCount)" 
                        :class="['tag','tag-border', (index === displayCount - 1 ? 'tag-last': '') ]" 
                        :key="tag">
                        {{ tag && `${tag.length >4 ? `${tag.substring(0,4)}...` : tag}` }}
                    </view>
                    <view @click.stop="" >
                        <uni-icons 
                            v-if="isShowMore"
                            class="icon" 
                            color="#999999" 
                            @click.stop="showMoreTemplateNames"
                            :type="showPopup ? 'arrowup' : 'arrowdown' " ref="icon" />
                    </view>
                    
            </view>
        </view>
        <view 
            v-if="showPopup"
            ref="more-template-names-popup" 
            class="more-template-names-popup"
            :style="{ right:`${shopPopupStyle.right}px`}"
            >
            <view class="tags-list">
                <view class="tag tag-border" v-for="tag in templateNames" :key="tag"> 
                    {{ tag }}
                </view>
            </view>
        </view> 
    </view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';

export default {
	components: { uniIcons },
	data() {
		return {
			showPopup: false,
			shopPopupStyle : {},
			isShowMore: false,
			tagsListStyle: {
				overflow: 'unset',
				height: 'auto',
			},
		};
	},
	props: {
		templateNames: {
			type: Array,
			default: () => []
		},
		displayCount:{
			type: [Number,String],
			default: 4,
		},
		triggerPopup:{
			type: Function,
			default: null,
		}, 
		label:{
			type: String,
			default: '',
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.checkOverflow();
		});
	}, 
	methods: {
		showMoreTemplateNames() {
			const wrap = uni.createSelectorQuery().in(this).select('.icon');
			const tasComponents = uni.createSelectorQuery().in(this).select('.tas-components');
			wrap.boundingClientRect((data) => {
				tasComponents.boundingClientRect((parent) => {
					this.shopPopupStyle = { right: Number(parent.width) - (Number(data.right) - Number(data.width))  };
					this.showPopup = !this.showPopup;
				}).exec();
			}).exec();
		},
		close() {
			if (this.triggerPopup) {
				this.triggerPopup('close');
			} else {
				this.$refs.moreTemplateNames.close();
			}
		}, 
		checkOverflow() {
			if (this.templateNames.length > this.displayCount) {
				this.isShowMore = true;
				this.tagsListStyle = {
					overflow: 'hidden',
					height: '50px'
				};
			}
		}
	}
};
</script>

<style lang="scss" scoped>
    @import './iconfont.css';

    .tags {
        display: flex;
        flex-wrap: wrap;
        color: #666;
        position: relative;
        justify-content: flex-start;
        align-items: center;
        .tagsList{
            display: flex;
            white-space: normal;
            width: auto;
            flex-wrap: wrap;
            align-items: center;
            .label{
                font-size: 26rpx;
                display: flex;
                align-items: center;
                white-space: nowrap;
                min-width:min-content;
                height: 18px;
                line-height: 18px;
                margin-top:2px;
                margin-bottom:2px;
            }

            .tag {
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                white-space: nowrap; 
                padding: 1px 6px;
                height: 18px;
                line-height: 18px;
                margin: 4px 0px;
                display: flex;
               
                &-border{
                    border: 1px solid #cccccc;
                    border-radius: 20px;
                    margin-right:6px; 
                    max-width: 50px;
                    width: max-content;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    
                }

                &-last{
                    margin-right: 0px !important;
                }
            }    
             
        }
        .icon {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    .tas-components{
        position: relative;
    }

    .more-template-names-popup{
        position: absolute;
        background-color: #ffffff;
        z-index: 9;
        border: 1px solid #cccccc;
        border-radius: 4px;
        box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.10); 
        line-height: 120%;
        padding: 10px;
        width: 72px;
        text-align: left;
        height: max-content;
        overflow-y: scroll;
        .tags-list{
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 110px;
           
            -webkit-overflow-scrolling: touch;
        }

        .tag{
            font-size: 24rpx;
            width: 144rpx;
        }
    }
</style>